<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>animate-css-grid example</title>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.0/normalize.css">
  <link rel="stylesheet" href="./index.css">
</head>

<body>
  <div class="scroll-example">
    <div class="card--1">1</div>
    <div class="card--2">2</div>
    <div class="card--3">3</div>
    <div class="card--2">4</div>
    <div class="card--1">5</div>
    <div class="card--3">6</div>
    <div class="">7</div>
    <div class="card--3">8</div>
    <div class="card--1">9</div>
    <div class="card--2">19</div>
  </div>
  <div class="p-4">
    <div class="mb-4">
      <p>click a card to expand it</p>
      <button class="btn js-toggle-grid">toggle grid size</button>
      <button class="btn js-add-card">add a card</button>
      <button class="btn js-remove-listener">remove animations</button>
    </div>

    <div class="grid">

      <div class="card card--1">
      </div>
      <div class="card card--5">
        <div>
          <div class="card__avatar"></div>
          <div class="card__title"></div>
          <div class="card__description"></div>
        </div>
      </div>
      <div class="card card--2">
        <div>
          <div class="card__avatar"></div>
          <div class="card__title"></div>
          <div class="card__description"></div>
        </div>
      </div>
      <div class="card card--3">
        <div>
          <div class="card__avatar"></div>
          <div class="card__title"></div>
          <div class="card__description"></div>
        </div>
      </div>
      <div class="card card--2">
        <div>
          <div class="card__avatar"></div>
          <div class="card__title"></div>
          <div class="card__description"></div>
        </div>
      </div>
      <div class="card card--4">
        <div>
          <div class="card__avatar"></div>
          <div class="card__title"></div>
          <div class="card__description"></div>
        </div>
      </div>
      <div class="card card--3">
        <div>
          <div class="card__avatar"></div>
          <div class="card__title"></div>
          <div class="card__description"></div>
        </div>
      </div>
      <div class="card card--1">
        <div>
          <div class="card__avatar"></div>
          <div class="card__title"></div>
          <div class="card__description"></div>
        </div>
      </div>
      <div class="card card--3">
        <div>
          <div class="card__avatar"></div>
          <div class="card__title"></div>
          <div class="card__description"></div>
        </div>
      </div>

    </div>
  </div>
  <div class="p-4">
    <div class="subjects">
      <section class="subject subject--active">
        <div>
          <h2 class="subject__title">
            Title One
          </h2>
          <div class="subject__content">
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Velit, sequi quas porro blanditiis distinctio consequatur minima
            optio vero eaque autem. Odit enim totam rem officia quae iste placeat labore similique?
          </div>
        </div>
      </section>
      <section class="subject">
        <div>
          <h2 class="subject__title">
            Title Two
          </h2>
          <div class="subject__content">
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Velit, sequi quas porro blanditiis distinctio consequatur minima
            optio vero eaque autem. Odit enim totam rem officia quae iste placeat labore similique?
          </div>
        </div>
      </section>
      <section class="subject">
        <div>
          <h2 class="subject__title">
            Title Three
          </h2>
          <div class="subject__content">
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Velit, sequi quas porro blanditiis distinctio consequatur minima
            optio vero eaque autem. Odit enim totam rem officia quae iste placeat labore similique?
          </div>
        </div>
      </section>
      <section class="subject">
        <div>
          <h2 class="subject__title">
            Title Four
          </h2>
          <div class="subject__content">
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Velit, sequi quas porro blanditiis distinctio consequatur minima
            optio vero eaque autem. Odit enim totam rem officia quae iste placeat labore similique?
          </div>
        </div>
      </section>
      <section class="subject">
        <div>
          <h2 class="subject__title">
            Title Five
          </h2>
          <div class="subject__content">
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Velit, sequi quas porro blanditiis distinctio consequatur minima
            optio vero eaque autem. Odit enim totam rem officia quae iste placeat labore similique?
          </div>
        </div>
      </section>

    </div>
  </div>

  <div class="p-4">
    <div class="nested-grid"></div>
  </div>

  <div class="p-4">
    <div class="grid-children-change">
      <div class="card card--5">
        <div class="card__inner">

        </div>
      </div>
      <div class="card card--2">
        <div class="card__inner">

        </div>
      </div>
      <div class="card card--3">
        <div class="card__inner">

        </div>
      </div>
      <div class="card card--2">
        <div class="card__inner">

        </div>
      </div>
      <div class="card card--4">
        <div class="card__inner">

        </div>
      </div>
      <div class="card card--3">
        <div class="card__inner">

        </div>
      </div>
      <div class="card card--5">
        <div class="card__inner">

        </div>
      </div>

    </div>
  </div>

  <div class="p-4">
    <div class="mb-4">
      <p>click a card to hide it</p>
      <button class="btn js-toggle-grid">toggle grid size</button>
      <button class="btn js-add-card">add a card</button>
      <button class="js-hide-button">show all hidden buttons</button>
    </div>

    <div class="grid hidden-cards-grid">

      <div class="card card--1">
      </div>
      <div class="card card--5">
        <div>
          <div class="card__avatar"></div>
          <div class="card__title"></div>
          <div class="card__description"></div>
        </div>
      </div>
      <div class="card card--2">
        <div>
          <div class="card__avatar"></div>
          <div class="card__title"></div>
          <div class="card__description"></div>
        </div>
      </div>
      <div class="card card--3">
        <div>
          <div class="card__avatar"></div>
          <div class="card__title"></div>
          <div class="card__description"></div>
        </div>
      </div>
      <div class="card card--2">
        <div>
          <div class="card__avatar"></div>
          <div class="card__title"></div>
          <div class="card__description"></div>
        </div>
      </div>
      <div class="card card--4">
        <div>
          <div class="card__avatar"></div>
          <div class="card__title"></div>
          <div class="card__description"></div>
        </div>
      </div>
      <div class="card card--3">
        <div>
          <div class="card__avatar"></div>
          <div class="card__title"></div>
          <div class="card__description"></div>
        </div>
      </div>
      <div class="card card--1">
        <div>
          <div class="card__avatar"></div>
          <div class="card__title"></div>
          <div class="card__description"></div>
        </div>
      </div>
      <div class="card card--3">
        <div>
          <div class="card__avatar"></div>
          <div class="card__title"></div>
          <div class="card__description"></div>
        </div>
      </div>

    </div>
  </div>


  <script src="./index.js" type="module"></script>


</body>

</html>
